<template>
  <div :id="id" class="DownLoadDetial_box" v-loading="loading" :element-loading-text="loadingText"
       element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="tab" :class="{hide_tab:!selectDossier&&isBrowser}">
      <div v-if="selectDossier">
        <div class="tab_item word16" style="text-align: center" @click="selectIndex=1"
             :class="{tab_selected:selectIndex===1}">电子卷宗
        </div>
        <div class="tab_item word16" style="text-align: center" @click="selectIndex=2"
             :class="{tab_selected:selectIndex===2}">文书卷宗
        </div>
      </div>
      <div v-else>
        <div class="tab_item word16" @click="selectIndex=3" :class="{tab_selected:selectIndex===3}">
          正在下载
          <span v-if="downloadList"> ({{ downloadList.length }})</span>
        </div>
        <div class="tab_item word16" @click="selectIndex=4" :class="{tab_selected:selectIndex===4}">
          下载成功
          <span v-if="successDownload.length"> ({{ successDownload.length }})</span>
        </div>
        <div class="tab_item word16" @click="selectIndex=5" :class="{tab_selected:selectIndex===5}">
          下载失败
          <span v-if="faildDownload.length"> ({{ faildDownload.length }})</span>
        </div>
      </div>
    </div>
    <div class="tab_content" :class="{hide_tab:!selectDossier&&isBrowser}">
      <div v-show="selectDossier" class="DownLoadDetial_main">
        <!--<h1 v-if="!(electronicDossier||documentDossier)">没有可下载文件</h1>-->
        <div class="DownLoadDetial_main_item" v-show="selectIndex===1">
          <el-tree class="tree scroll_bar"
                   :data="electronicDossier"
                   :load="loadNode"
                   :props="{label: 'NodeName', isLeaf: 'leaf'}"
                   lazy
                   show-checkbox
                   accordion
                   v-show="electronicDossier.length"
                   ref="electronicDossierTree"
                   node-key="NodeNo"></el-tree>
          <div class="nodata" v-if="!electronicDossier.length"></div>
        </div>
        <div class="DownLoadDetial_main_item" v-show="selectIndex===2">
          <el-tree class="tree scroll_bar"
                   :data="documentDossier"
                   :load="loadNode"
                   :props="{label: 'NodeName'}"
                   lazy
                   show-checkbox
                   v-show="documentDossier.length"
                   ref="documentDossierTree"
                   node-key="NodeNo"></el-tree>
          <div class="nodata" v-if="!documentDossier.length"></div>
        </div>
        <div class="btn_box">
          <div class="check_all">
            <el-checkbox v-if="electronicDossier.length&&selectIndex===1||documentDossier.length&&selectIndex===2"
                         v-model="checkAll" style="font-size: 14px;margin-left: 10px;">全选
            </el-checkbox>
          </div>
          <button class="button" @click="download" v-if="documentDossier.length||electronicDossier.length">下载</button>
          <button class="button" @click="hide" v-else>关闭</button>
        </div>
      </div>
      <div v-show="!selectDossier" style="width: 100%;height:100%">
        <div class="progress_box">
          <span class="word16">进度</span>
          <el-progress class="progress" :stroke-width="16" text-inside :percentage="totalProgress"></el-progress>
          <br>
          <span class="word16" style="margin-right: 5px">导入结果：</span>
          <span class="word16">共{{ downloadList.length }}个，
            其中成功<span class="word16" style="color: green"> {{ successDownload.length }} </span>个，
            失败<span class="word16" style="color: red"> {{ faildDownload.length }} </span>个</span>
        </div>
        <el-table :data="downloadListTableData" class="word14" style="width: 100%;height: calc(100% - 80px);"
                  tooltip-effect="dark"
                  ref="downloadTable"
                  empty-text="暂无数据">
          <el-table-column type="index" :index="indexMethod" width="55">
          </el-table-column>
          <el-table-column prop="dir" label="目录" show-overflow-tooltip>
            <template slot-scope="scope" v-once>
              <div class="word14 nowrap" :title="scope.row.dir">{{ getCatalogName(scope.row) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="label" label="文件名" width="80" show-overflow-tooltip>
            <template slot-scope="scope" v-once>
              <div class="word14 nowrap" :id="scope.row.NodeNo" :title="scope.row.NodeName">{{ scope.row.NodeName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" :width="selectIndex!==5?110:55" header-align="center"
                           align="center">
            <template slot-scope="scope">
              <i class="el-icon-loading word14" style="vertical-align: middle;" v-if="selectIndex===3"
                 title="正在下载"></i>
              <i class="el-icon-success word14" style="color: #409EFF;vertical-align: middle;"
                 v-if="selectIndex===4" title="下载成功"></i>
              <i class="el-icon-error word14" style="color: red;vertical-align: middle;" v-if="selectIndex===5"
                 title="下载失败"></i>
            </template>
          </el-table-column>
          <el-table-column type="expand" :width="55" v-if="selectIndex===5">
            <template slot-scope="{ row, column, $index }">
              <el-form label-position="top" class="demo-table-expand">
                <el-form-item>
                  <span class="word14 scroll_bar_4" v-html="row.log"
                        style="user-select: text;cursor: auto;max-height: 100px;overflow-y: auto;display: block;"></span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
        </el-table>
        <div style="height:41px;position:relative;padding-left:10px;overflow:hidden;">
          <div class="inline">
            <!--<el-pagination background style="position: absolute;top: 50%;transform: translate(0,-50%);"-->
            <!--v-show="(selectIndex===3?runningCount:(selectIndex===4?succCount:failCount))>pageSize"-->
            <!--:page-size="pageSize" layout="prev, pager, next"-->
            <!--:current-page.sync="currentPage[selectIndex]"-->
            <!--:total="selectIndex===3?runningCount:(selectIndex===4?succCount:failCount)">-->
            <!--</el-pagination>-->
          </div>
          <div style="position: absolute;right: 0;top: 0;background: white">
            <button class="btn" v-if="!isBrowser&&isComplite&&showContinueBtn" @click="continueDownload">继续下载卷宗</button>
            <button class="btn" v-if="!isBrowser&&isComplite&&!isContinue" @click="hide">返回案件列表</button>
            <button class="btn" v-if="isComplite&&faildDownload.length" @click="retryAll">重试失败文件</button>
            <button class="btn" v-if="isComplite&&!isContinue" @click="openCaseFile(casePath)">打开案件</button>
            <button class="btn" v-if="isComplite&&isContinue" @click="hide">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import ICE from '../common/ICEHelper'
import {action} from '../common/quantity'

let remote = ''
let BrowserWindow = ''

const moment = require('moment')
const uuid = require('uuid/v4')

// util: {getRandomId, getTreeDataSource, getTreeNodes}
const {
  util: {getRandomId}
} = require('../util')

function getlog(log) {
  return `<span style="color:#00cd00;user-select: text;cursor: auto;">【${moment().format('YYYY-MM-DD hh:mm:ss')}】</span>${log}<br>`
}

export default {
  name: 'DownloadDetail',
  data() {
    return {
      id: getRandomId(),
      selectIndex: 1,
      electronicDossier: [], // 电子卷宗
      documentDossier: [], // 文书卷宗
      selectDossier: true, // 是否选择卷宗，（选择卷宗/下载卷宗）
      downloadList: [], // 下载列表
      successDownload: [], // 下载成功的
      faildDownload: [], // 下载失败的
      isComplite: false, // 是否下载完成
      pageSize: 100, // 分页，每页显示数量
      currentPage: {
        3: 1,
        4: 1,
        5: 1
      },
      dossierCatalog: [],
      docDossierCatalog: [],
      isContinueDownload: false, // 是否为继续下载
      casePath: '',
      loading: false, // 是否显示菊花图
      loadingText: '', // 显示菊花图时，文字内容
      showContinueBtn: true,
      evidenceMaterialCatalog: [],
      dossierLoaded: 0,
      docDossierLoaded: 0,
      downloadParam: {}
    }
  },
  async mounted() {
    this.isContinueDownload = this.isContinue
    // 加载证据材料目录
    await this.GetMaterialCatalog(this.selectedCase.BMSAH, this.selectedCase.TYSAH, this.selectedCase.CBDW_BM)
  },
  computed: {
    ...mapState({
      userInfo: state => state.mainPage.userInfo
    }),
    checkAll: {
      get() {
        let tree = this.$refs[this.selectIndex === 1 ? 'electronicDossierTree' : 'documentDossierTree']
        if (!tree) return
        return this[this.selectIndex === 1 ? 'dossierLoaded' : 'docDossierLoaded'] === tree.getCheckedKeys().length
      },
      set(value) {
        let keys = []
        let dataSource = this.selectIndex === 1 ? this.dossierCatalog : this.docDossierCatalog
        if (value) dataSource.filter(x => !x.NodeParentNo || x.NodeParentNo === '-1').forEach(x => keys.push(x.NodeNo))
        this.$refs[this.selectIndex === 1 ? 'electronicDossierTree' : 'documentDossierTree'].setCheckedKeys(keys)
      }
    },
    downloadListTableData() {
      let startNum = (this.currentPage[this.selectIndex] - 1) * this.pageSize
      let endNum = this.currentPage[this.selectIndex] * this.pageSize - 1

      let temp = this.downloadList
      if (this.selectIndex === 4) {
        // 成功
        temp = this.successDownload
      } else if (this.selectIndex === 5) {
        // 失败
        temp = this.faildDownload
      }
      temp = temp.filter((item, index) => index >= startNum && index <= endNum)
      return temp
    },
    totalProgress() {
      if (this.downloadList.length === 0) return 100
      let downloaded = this.successDownload.length + this.faildDownload.length
      return Math.round(downloaded / (downloaded + this.downloadList.length) * 10000) / 100
    }
  },
  methods: {
    loadNode(node, resolve) {
      let childrenNodes = this[this.selectIndex === 1 ? 'dossierCatalog' : 'docDossierCatalog'].filter(x => x.NodeParentNo === node.key)
      childrenNodes.map((item) => {
        item.leaf = item.NodeType === 'file'
      })
      this[this.selectIndex === 1 ? 'dossierLoaded' : 'docDossierLoaded'] += childrenNodes.length
      resolve(childrenNodes)
    },
    clearDownloaded() {
      try {
        this.loadStatus({loading: true, loadingText: '正在过滤已下载证据材料，请稍等...'})
        for (let i = 0; i < this.successDownload.length; i++) {
          let node = this.successDownload[i]
          let dataSource = this[node.JZBH ? 'dossierCatalog' : 'docDossierCatalog']

          let index = dataSource.findIndex(x => x.NodeNo === node.NodeNo)
          if (index >= 0) {
            let nodeParentNo = dataSource[index].NodeParentNo
            dataSource.splice(index, 1)

            while (true) {
              let node = dataSource.find(x => x.NodeParentNo === nodeParentNo)
              if (node) break
              index = dataSource.findIndex(x => x.NodeNo === nodeParentNo)
              if (index < 0) break
              nodeParentNo = dataSource[index].NodeParentNo
              dataSource.splice(index, 1)
            }
          }
        }
        return true
      } catch (e) {
        console.error(e)
        this.$alert(`过滤已下载证据材料异常：${e.message}`, '提示', {type: 'error'})
        return false
      } finally {
        this.loadStatus({loading: false})
      }
    },
    _loadStatus(arg) {
      this.loading = arg.loading
      this.loadingText = arg.loadingText
    },
    async continueDownload() {
      if (!this.clearDownloaded()) return
      // 获取电子卷宗根目录
      this.electronicDossier = this.dossierCatalog.filter(x => !x.NodeParentNo && x.NodeType === 'dir')

      // 获取电子卷宗加载节点个数
      this.dossierLoaded = this.electronicDossier.length

      // 获取文书卷宗根目录
      this.documentDossier = this.docDossierCatalog.filter(x => (!x.NodeParentNo || x.NodeParentNo === '-1') && x.NodeType === 'dir')

      // 获取电子卷宗加载节点个数
      this.docDossierLoaded = this.documentDossier.length

      this.downloadList = []
      this.faildDownload = []
      this.successDownload = []

      this.selectDossier = true
      this.isContinueDownload = true
      this.selectIndex = 1
    },
    retryAll() {
      try {
        if (!this.clearDownloaded()) return
        this.loadStatus({loading: true, loadingText: '正在重新组织下载证据材料，请稍等...'})
        for (let i = 0; i < this.successDownload.length; i++) {
          let item = this.successDownload[i]
          let datasource = this.downloadParam[item.JZBH ? 'FileCatalog' : 'DocFileCatalog']

          let index = datasource.findIndex(x => x.NodeNo === item.NodeNo)
          if (index <= 0) continue
          datasource.splice(index, 1)
        }

        this.downloadList = this.downloadParam.FileCatalog.concat(this.downloadParam.DocFileCatalog)
        this.successDownload = []
        this.faildDownload = []
        this._downloadFile(this.downloadParam)
      } catch (e) {
        console.error(e)
        this.$alert(`过滤已下载证据材料异常：${e.message}`, '提示', {type: 'error'})
      } finally {
        this.loadStatus({loading: false})
      }
    },
    // 获取证据材料上级目录
    getCatalogName(row) {
      if (row.dir) return row.dir
      let dirs = []

      let nodeParentNo = row.NodeParentNo

      while (true) {
        let node = this.evidenceMaterialCatalog.find(x => x.NodeNo === nodeParentNo)
        if (!node) break
        dirs.unshift(node.NodeName)
        nodeParentNo = node.NodeParentNo
      }
      this.$set(row, 'dir', dirs.join(' / '))
      return row.dir
    },
    indexMethod(index) {
      return ((this.currentPage[this.selectIndex] - 1) * this.pageSize + 1 + index)
    },
    async download() {
      // 获取文件保存路径
      let savePath = this.$store.state.appearCourt.casePath
      if (!this.isContinueDownload) {
        let initInfo = {
          savePath: savePath || (uuid() + '.case'),
          BMSAH: this.selectedCase.BMSAH,
          TYSAH: this.selectedCase.TYSAH,
          UserInfo: {
            UnitCode: this.userInfo.unitCode || this.userInfo.DWBM,
            UnitName: this.userInfo.unitName || this.userInfo.DWMC,
            UserName: this.userInfo.userName || this.userInfo.DLBM,
            Password: this.userInfo.Password || this.userInfo.KL
          }
        }

        savePath = await ICE.InitDatabaseFile(initInfo)
      }

      try {
        this.loadStatus({loading: true, loadingText: '正在获取电子卷宗信息，请稍等'})

        let halfCheckedNodes = this.$refs.electronicDossierTree.getHalfCheckedNodes()
        let checkedNodes = this.$refs.electronicDossierTree.getCheckedNodes()

        let dossier = {Catalog: [], FileCatalog: []}
        if (checkedNodes.length === this.dossierLoaded) {
          dossier.Catalog = this.dossierCatalog.filter(x => x.NodeType === 'dir')
          dossier.FileCatalog = this.dossierCatalog.filter(x => x.NodeType === 'file')
        } else {
          dossier = getChildrenNode(this.dossierCatalog, checkedNodes)
          dossier.Catalog = dossier.Catalog.concat(halfCheckedNodes)
        }
        this.downloadList = dossier.FileCatalog

        this.loadStatus({loading: true, loadingText: '正在获取文书卷宗信息，请稍等...'})
        halfCheckedNodes = this.$refs.documentDossierTree.getHalfCheckedNodes()
        checkedNodes = this.$refs.documentDossierTree.getCheckedNodes()

        let docDossier = {Catalog: [], FileCatalog: []}
        if (checkedNodes.length === this.docDossierLoaded) {
          docDossier.Catalog = this.docDossierCatalog.filter(x => x.NodeType === 'dir')
          docDossier.FileCatalog = this.docDossierCatalog.filter(x => x.NodeType === 'file')
        } else {
          docDossier = getChildrenNode(this.docDossierCatalog, checkedNodes, '-1', 'docDossier')
          docDossier.Catalog = docDossier.Catalog.concat(halfCheckedNodes)
        }
        this.downloadList = this.downloadList.concat(docDossier.FileCatalog)

        if (!this.downloadList.length) {
          try {
            let action = await this.$confirm(
                `没有选中任何需要下载的文件,是否结束！`,
                '提示'
            )
            action === 'confirm' && this.hide()
          } catch (e) {
          }
          return
        }

        if (savePath) this.casePath = savePath
        this.selectIndex = 3
        this.selectDossier = false

        let count = this.dossierCatalog.filter(x => x.NodeType === 'file').length +
            this.docDossierCatalog.filter(x => x.NodeType === 'file').length

        this.showContinueBtn = count !== this.downloadList.length
        this._downloadFile({
              Catalog: dossier.Catalog,
              FileCatalog: dossier.FileCatalog,
              DocCatalog: docDossier.Catalog,
              DocFileCatalog: docDossier.FileCatalog
            }
        )
      } catch (e) {
        console.error(e)
        this.$alert(e.message, '提示', {type: 'warning'})
      } finally {
        this.loadStatus({loading: false})
      }
    },
    async _downloadFile(param) {
      this.isComplite = false
      this.$eventBus.$on('DownloadFile', async data => {
        try {
          if (data.ID === 'DownloadFileFinished') {
            let caseList = await this.$api.post.getCaseListByAJID({
              BMSAH: this.selectedCase.BMSAH,
              GH: this.userInfo.GH
            })
            if (caseList.errno) return this.$alert('错了')
            caseList = caseList.data

            if (!caseList.length) {
              // 添加到案件列表中
              await this.$api.post.addAjxx({
                BMSAH: this.selectedCase.BMSAH,
                savePath: this.casePath,
                XSMC: this.selectedCase.AJMC,
                DWBM: this.userInfo.DWBM,
                DWMC: this.userInfo.DWMC,
                BMBM: '',
                BMMC: '',
                GH: this.userInfo.GH,
                MC: this.userInfo.DLBM,
                PID: this.$parent.$parent.PID
              })
            }
            return this.$eventBus.$off('DownloadFile')
          }

          let index = this.downloadList.findIndex(item => item.NodeNo === data.ID)
          if (index < 0 || index > this.downloadList.length - 1) return
          let node = this.downloadList[index]
          console.log(node.NodeName, data)
          if (data.Message) {
            this.$set(node, 'log', getlog(data.Message))

            this.faildDownload.push(node)
          } else {
            this.successDownload.push(node)
          }
          this.downloadList.splice(index, 1)
        } finally {
          console.groupEnd()
        }
      })
      this.downloadParam = param
      try {
        let preDownload = {
          dbPath: this.casePath,
          password: '',
          ...param
        }
        await ICE.DownLoadEvidenceMaterial(preDownload)
        // await this.verification(this.casePath)
        if (this.isContinue) await this.$store.dispatch(action.appearCourt.initAppearCourt)
      } catch (e) {
        console.error(e)
        await this.$alert(`失败原因：${e.message}`, '案件下载失败', {type: 'error', showClose: false})
        this.selectDossier = true
        this.selectIndex = 1
      } finally {
        this.isComplite = true
      }
    },
    /**
     * 隐藏当前页面
     */
    hide() {
      this.$emit('hide')
    },
    // 获取证据材料目录
    async GetMaterialCatalog(BMSAH, TYSAH, CBDW_BM) {
      try {
        this.loadStatus({
          loading: true,
          loadingText: '卷宗目录加载中，请稍候...'
        })
        let res = await ICE.GetEvidenceMaterialCatalog({
          BMSAH: BMSAH,
          TYSAH: TYSAH,
          CBDW_BM: CBDW_BM
        })
        // 获取电子卷宗目录
        this.dossierCatalog = res.dossier.Catalog.concat(res.dossier.FileCatalog)
        // 获取电子卷宗根目录
        this.electronicDossier = res.dossier.Catalog.filter(x => !x.NodeParentNo)

        // this.electronicDossier = res.dossier.Catalog.filter(x => (!x.NodeParentNo))
        // 获取电子卷宗加载节点个数
        this.dossierLoaded = this.electronicDossier.length

        // 获取文书卷宗目录
        this.docDossierCatalog = res.docDossier.Catalog.concat(res.docDossier.FileCatalog)
        // 获取文书卷宗根目录
        this.documentDossier = res.docDossier.Catalog.filter(x => !x.NodeParentNo || x.NodeParentNo === '-1')
        // 获取文书卷宗加载节点个数
        this.docDossierLoaded = this.documentDossier.length

        this.evidenceMaterialCatalog = res.dossier.Catalog.concat(res.docDossier.Catalog)
      } catch (e) {
        console.error(e)
        this.$alert(e.message || e.InnerException.message, '错误', {type: 'error'})
      } finally {
        this.loadStatus({loadingcase: false})
      }
    },
    async openCaseFile(casePath) {
      console.log('casePath', casePath)
      this.loadStatus({loading: true, loadingText: '案件加载中，请稍候...'})
      await this.openCase(casePath)
      this.loadStatus({loading: false})
    }
  },
  props: {
    selectedCase: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isContinue: {
      type: Boolean,
      default: false
    }
  }
}

function getChildrenNode(allDataSource, dataSource, nodeParentNo = '') {
  let catalog = {Catalog: [], FileCatalog: []}

  let children = []
  if (!nodeParentNo || nodeParentNo === '-1') {
    for (let i = 0; i < dataSource.length; i++) {
      let item = dataSource[i]
      let node = dataSource.find(x => x.NodeNo === item.NodeParentNo)
      if (node) continue
      children.push(item)
    }
  } else {
    children = allDataSource.filter(x => x.NodeParentNo === nodeParentNo)
  }
  for (let i = 0; i < children.length; i++) {
    let item = children[i]
    catalog[item.NodeType === 'dir' ? 'Catalog' : 'FileCatalog'].push(item)
    let res = getChildrenNode(allDataSource, null, item.NodeNo)
    catalog.Catalog = catalog.Catalog.concat(res.Catalog)
    catalog.FileCatalog = catalog.FileCatalog.concat(res.FileCatalog)
  }
  return catalog
}
</script>

<style scoped lang="scss">
.DownLoadDetial_box {
  font-size: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: default;
  height: 100%;
  width: 100%;
  vertical-align: top;
  background: white;

  .tab_content {
    width: calc(100% - 150px);
    height: 100%;
    display: inline-block;

    &.hide_tab {
      width: 100%;
    }
  }
}

.DownLoadDetial_box * {
  font-size: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: default;
  vertical-align: top;
}

.DownLoadDetial_main_item {
  display: inline-block;
  vertical-align: top;
  height: calc(100% - 50px);
  width: 100%;
  position: relative;
}

.tab {
  height: 100%;
  border-right: 1px solid #a0b9cb;
  display: inline-block;
  width: 150px;

  &.hide_tab {
    display: none;
  }
}

.tab .tab_item {
  padding: 10px 0 10px 15px;
  /*border-bottom: 1px solid #a0b9cb;*/
  /*text-align: center;*/
  width: 100%;
}

.tab .tab_item:hover {
  background: #def2fe;
  color: black;
}

.tab .tab_item span {
  font-size: 14px;
}

.tab .tab_selected {
  background: #0d6bb0;
  color: white;
  /*border-bottom: none;*/
}

.DownLoadDetial_main {
  height: 100%;
  width: 100%;
  /*width: calc(100% - 38px);*/
  /*border: 1px solid black;*/
}

.tree {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: inline-block;
}

.btn_box {
  text-align: right;
  width: calc(100% - 10px);
  margin-top: 10px;
  position: relative;
}

.btn_box > .button {
  font-size: 14px;
  width: 100px;
  height: 30px;
  border: none;
  background: #409eff;
  color: #fff;
  outline: none;
}

.btn_box > .button:hover {
  background: #66b1ff;
}

.btn_box .check_all {
  position: absolute;
  left: 0;
  top: 5px;
  /*height: 100%;*/
  /*width: 75px;*/
}

.progress_box {
  height: 50px;
  /*margin-top: 10px;*/
  /*padding-bottom: 10px;*/
  border-bottom: 1px solid #a0b9cb;
  position: relative;
  padding-left: 10px;

  & > span {
    line-height: 25px;
  }

  .progress {
    width: calc(100% - 45px);
    display: inline-block;
    padding-left: 10px;
    /*line-height: 40px;*/
    margin-top: 6px;
  }
}

button.btn {
  margin-right: 10px;
  /*margin-top: 5px;*/
  height: 30px;
  width: 90px;
  font-size: 14px;
  outline: none;
  border: none;
  background: #409eff;
  border-radius: 3px;
  color: white;
  /*border-color: #409EFF;*/
}

button.btn:hover {
  background: #66b1ff;
}

</style>